<template>
  <nav class="ui inverted vertical segment my-padded-tb-mini my-shadow-small">
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 @click="toHome" class="ui blue header item my-cursor-pointer">管理后台</h2>
        <router-link tag="a" to="/blog" :class="navClass"><i class="icon home"></i>博客</router-link>
        <router-link tag="a" to="/type" :class="navClass"><i class="icon th"></i>分类</router-link>
        <router-link tag="a" to="/tag" :class="navClass"><i class="icon tags"></i>标签</router-link>
        <router-link tag="a" to="/comment" :class="navClass"><i class="icon comments"></i>评论</router-link>
        <div :class="navClass + ' right'">
          <div @click="dropdown" :class="dropdownClass + ' ui item dropdown'">
            <div class="text"><img class="ui avatar image" :src="$store.getters.userInfo.avatar"> {{$store.getters.userInfo.nickname}}</div>
            <i class="dropdown icon"></i>
            <div :class="dropdownMenuClass + ' menu'">
              <a @click="logout" class="item">注销</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a @click="changeNav()" class="ui black icon button my-menu my-right-top my-mobile-show">
      <i class="icon sidebar"></i>
    </a>
  </nav>
</template>

<script>

  export default {
    name: "CommonHeader",
    data() {
      return {
        isShowMenu: false,
        dropdownClass: '',
        dropdownMenuClass: '',
        navClass: 'my-item item my-mobile-hide',
      }
    },
    created() {
      this.$store.dispatch("GetInfo")
    },
    methods: {
      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.reload()
          })
        })
      },
      dropdown() {
        if (this.dropdownMenuClass === '' && this.dropdownClass === '') {
          this.dropdownClass = 'active visible'
          this.dropdownMenuClass = 'transition visible my-display-block'
        } else {
          this.dropdownClass = ''
          this.dropdownMenuClass = ''
        }
      },
      toHome() {
        if (this.$route.name !== 'Index') {
          this.$router.push({name: 'Index'})
        }
      },
      changeNav() {
        if (this.navClass === 'my-item item my-mobile-hide') {
          this.navClass = 'right my-item item'
        } else {
          this.navClass = 'my-item item my-mobile-hide'
        }
      },
    }
  }
</script>

<style scoped>

</style>
